import React, {Component} from 'react';
import Home_part from '../adminComponent/partComponent/Home_part';
import Ques_temp from '../adminComponent/partComponent/Ques_temp';
import Create_news from '../adminComponent/partComponent/Create_news';
import QuestInput from '../component/QuesInput';
import WrappedAdvancedSearchForm from '../component/DataSearch';
import ReactDOM from 'react-dom';
import UserNoticeList from '../component/UserNoticeList';
import {Button, Layout, Menu, Icon} from 'antd';
import './UserPage.css';
import {Avatar} from 'antd';
import Questionnaire from '../component/Questionnaire'
import Questionnaire_example from '../component/Questionnaire_example'

const {Header, Content, Footer, Sider} = Layout;

class MyHome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            choose_num: 0,
            choose_arr: [
                <UserNoticeList {...this.props} onChange={this.onChangeBody.bind(this)}/>,
                <Ques_temp {...this.props} onChange={this.onChangeBody.bind(this)}/>,
                <Questionnaire {...this.props} onChange={this.onChangeBody.bind(this)}/>,
                <WrappedAdvancedSearchForm {...this.props} onChange={this.onChangeBody.bind(this)}/>,
                <Questionnaire_example {...this.props} onChange={this.onChangeBody.bind(this)}/>
            ]
        }

    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    onChangeBody(e) {
        this.setState({
            choose_num: e
        })
    }

    onChangeNum(e) {
        this.setState({
            choose_num: e.key,
        })
    }

    render() {
        return (
            <div className="layout">
                <Layout style={{height: '100%'}}>
                    <Sider
                        trigger={null}
                        collapsible
                        collapsed={this.state.collapsed}
                        breakpoint="lg"
                        // collapsedWidth="0"
                        onCollapse={(collapsed, type) => {
                            console.log(collapsed, type);
                        }}
                    >
                        <div className="logo">
                            <div className="display" style={{display: 'flex', justifyContent: 'center'}}>
                                <Avatar style={{backgroundColor: '#87d068'}} icon="user" size="large"/>
                            </div>
                            <div style={{color: 'orange', textAlign: 'center', position: 'relative'}}>USER</div>
                            <div style={{textAlign: 'center', marginTop: 5}}>
                                <Button type="primary" icon="logout" size="small" onClick={()=>window.location.href = "/"}>退出</Button>
                            </div>
                            <div>
                            </div>
                        </div>
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['0']}
                              onSelect={this.onChangeNum.bind(this)}>
                            <Menu.Item key="0">
                                <Icon type="notification"/>
                                <span className="nav-text">新闻通知</span>
                            </Menu.Item>
                            <Menu.Item key="1">
                                <Icon type="file-text"/>
                                <span className="nav-text">问卷查看</span>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Icon type="edit"/>
                                <span className="nav-text">问卷填写</span>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Icon type="area-chart"/>
                                <span className="nav-text">数据查询</span>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{background: '#fff', padding: 0}}>
                            <Icon
                                className="trigger"
                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                onClick={this.toggle}
                            />
                            <div className="head_right">
                                <img src={require("../img/logo-whut.png")}/>
                            </div>
                        </Header>
                        <Content style={{margin: '1%', overflow: 'auto'}}>
                            <div style={{padding: 24, background: '#fff', height: '100%'}}>
                                <div className="choose">
                                    {this.state.choose_arr[this.state.choose_num]}
                                </div>
                            </div>
                        </Content>
                        <Footer style={{textAlign: 'center', color: 'white', backgroundColor: 'black'}}>
                            SmartLab Design ©2018 Powered By 武汉理工大学智能技术实验室
                        </Footer>
                    </Layout>
                </Layout>
            </div>
        );

    }
}

export default MyHome;
